<div class="h-[75vh] overflow-auto rounded-box border border-base-content/5 bg-base-100">
    <table class="table">
        <thead>
            <tr>
                <th>Email</th>
                <th>Active roles</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @for (user of users(); track user.id) {
                <tr>
                    <td>{{user.email}}</td>
                    <td>{{user.roles}}</td>
                    <td><button (click)="openRolesModal(user)" class="btn btn-primary">Edit roles</button></td>
                </tr>
            }
        </tbody>
    </table>
</div>

<dialog #rolesModal class="modal">
    <div class="modal-box">
        <h3 class="text-lg font-bold">Edit roles for {{selectedUser?.email}}</h3>

        <fieldset class="fieldset w-full p-4 bg-base-100 border border-base-300 rounded-box">
            <legend class="fieldset-legend">Select roles</legend>
            @for (role of availableRoles; track $index) {
                <label class="fieldset-label">
                    <input 
                        (change)="toggleRole($event, role)"
                        type="checkbox"
                        [checked]="selectedUser?.roles?.includes(role)"
                        class="checkbox"
                        [disabled]="selectedUser?.email === 'admin@test.com' && role === 'Admin'"
                    >
                    {{role}}
                </label>
            }
        </fieldset>
        <div class="modal-action">
            <button (click)="updateRoles()" class="btn btn-primary">Submit</button>
        </div>
    </div>
    <form method="dialog" class="modal-backdrop">
        <button>Close</button>
    </form>
</dialog>